<template>
    <!--处理顶部数据-->
    <div class="nav-box">
        <div class="nav-background">
            <van-image fit="cover" width="100%" height="270" :src="userInfo.background" />
        </div>
        <!--顶部导航栏-->
        <div class="nav-bar">
            <!--顶部导航栏-->
            <div class="nav-icon-box">
                <van-icon class-prefix="iconfont" name="row" @click="showLeftPopUp()" size="20" />
                <van-icon class-prefix="iconfont" name="share" size="20" @click="showSahrePopUp()" />
            </div>
            <!--个人昵称以及编号-->
            <div class="user-info-box">
                <!--用户头像-->
                <div class="user-avatar">
                    <van-image width="4.5rem" height="4.5rem" :src="userInfo.avatar" round></van-image>
                    <div class="add-status">
                        <van-icon class-prefix="iconfont" name="add" @click="previewAvatar()"></van-icon>
                    </div>
                </div>
                <div class="user-nickname">
                    <div class="gender-box">
                        <div class="user-name">{{ userInfo.nickname }}</div>
                        <div class="gender-icon">
                            <van-icon v-if="userInfo.gender == 1" class-prefix="iconfont" name="boy"></van-icon>
                            <van-icon v-else-if="userInfo.gender == 2" class-prefix="iconfont" name="girl"></van-icon>
                        </div>
                    </div>
                    <div class="qrcode-box">
                        <div>衣橱号：{{ userInfo.userId }}</div>
                        <div><van-icon class-prefix="iconfont" name="qrcode" size="16" @click="showQrCode()"></van-icon>
                        </div>
                    </div>
                </div>
            </div>
            <!--个人简介-->
            <div class="user-brief">{{ userInfo.brief != "" ? userInfo.brief : "暂时还没有简介~" }}</div>
            <!--成果以及编辑-->
            <div class="fruit-setting-box">
                <div class="fruit-container">
                    <div class="fruit-box" v-for="(item) in fruitList" v-bind:key="item.tag">
                        <div class="fruit-count">{{ item.count }}</div>
                        <div class="fruit-tag">{{ item.tag }}</div>
                    </div>
                </div>
                <div>
                    <van-button plain round class="setting-btn" type="small" @click="editUserInfo()" text="编辑资料" />
                    <van-button plain round icon-prefix="iconfont" class="setting-btn" @click="navToPage('/setting')"
                        type="small" icon="setting-2" />
                </div>
            </div>
        </div>
        <!--标签页-->
        <div class="bottom-tab-box">
            <van-tabs v-model:active="active" background="transparent">
                <van-tab title="赞过">
                    <van-empty image="https://cloth.nightowl.top/images/others/404.png" image-size="200"
                        description="赞过·内容即将开放，敬请期待~" />
                </van-tab>
                <van-tab title="收藏">
                    <van-empty image="https://cloth.nightowl.top/images/others/404.png" image-size="200"
                        description="收藏·内容即将开放，敬请期待~" />
                </van-tab>
                <van-tab title="历史">
                    <van-empty image="https://cloth.nightowl.top/images/others/404.png" image-size="200"
                        description="历史·内容已在系统中开发过，因此不做重点开发~" />
                </van-tab>
            </van-tabs>
        </div>
    </div>
    <!--处理二维码弹出框-->
    <van-popup v-model:show="QrcodePopUp" round>
        <div class="pop-qrcode-box">
            <van-image width="180" height="180" src="https://cloth.nightowl.top/images/others/qrcode.png"></van-image>
            <van-button color="#7232dd" loading-type="spinner" :loading="isRefreshing" @click="refreshQrcode()"
                :style="{ marginTop: '5px' }" loading-text="刷新中..." size="small">刷新</van-button>
            <div class="close-qrcode" @click="closeQrcode()">
                <van-icon class-prefix="iconfont" name="error1" size="24"></van-icon>
            </div>
        </div>
    </van-popup>
    <!--设置页面-->
    <!--设置左侧弹出框-->
    <van-popup v-model:show="leftPopUp" position="left" :style="{ width: '70%', height: '100%' }">
        <div class="left-popup-box">
            <van-image src="https://cloth.nightowl.top/images/others/banner.png"></van-image>
            <van-cell-group>
                <van-cell title="发现好友" icon-prefix="iconfont" icon="add-friend" clickable :border="false"
                    @click="findFriends()" />
            </van-cell-group>
            <van-cell-group>
                <van-cell title="历史记录" icon-prefix="iconfont" icon="history" clickable @click="historyRecord()" />
                <van-cell title="草稿箱" icon-prefix="iconfont" icon="draft" clickable @click="draftContents()" />
                <van-cell title="优惠券" icon-prefix="iconfont" icon="coupon" clickable @click="couponList()" />
            </van-cell-group>
            <van-cell-group>
                <van-cell title="更新日志" icon-prefix="iconfont" icon="update" clickable @click="updateList()" />
                <van-cell title="社区公约" icon-prefix="iconfont" icon="leaf" clickable @click="communityList()" />
                <van-cell title="用户条款" icon-prefix="iconfont" icon="clause" clickable @click="userList()" />
            </van-cell-group>
            <div class="bottom-items">
                <div class="icon-box" @click="navToPage('/setting')">
                    <div class="icon-bg">
                        <van-icon class-prefix="iconfont" name="setting-2-dark"></van-icon>
                    </div>
                    <div class="icon-label">设置</div>
                </div>
                <div class="icon-box">
                    <div class="icon-bg">
                        <van-icon class-prefix="iconfont" name="service"></van-icon>
                    </div>
                    <div class="icon-label" @click="navToPage('/suggest')">意见与反馈</div>
                </div>
                <div class="icon-box">
                    <div class="icon-bg">
                        <van-icon class-prefix="iconfont" name="scan"></van-icon>
                    </div>
                    <div class="icon-label" @click="scanQrCode()">扫一扫</div>
                </div>
            </div>
        </div>
    </van-popup>
    <!--分享面板-->
    <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="shareOptions" @click="shareClick()" />
</template>
<script setup>
import { showDialog, showConfirmDialog, showImagePreview, showToast } from "vant";
import { ref } from "vue";
import { useRouter } from "vue-router";
import _service from "../request/axios"
const router = useRouter();
const userInfo = ref({});
let QrcodePopUp = ref(false);
let isRefreshing = ref(false);
let fruitList = ref([{
    count: 3,
    tag: "关注"
}, {
    count: 0,
    tag: "粉丝"
}, {
    count: 10,
    tag: "获赞与收藏"
}]);
let leftPopUp = ref(false);
let showShare = ref(false);
const shareOptions = ref([
    [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
    ]
]);
function shareClick() {
    showToast("分享功能即将开放~");
    showShare.value = false;
}
function showQrCode() {
    if (checkUserLogin()) {
        //重新请求一次二维码
        QrcodePopUp.value = true;
    }
}
function closeQrcode() {
    QrcodePopUp.value = false;
    isRefreshing.value = false;
}
function refreshQrcode() {
    isRefreshing.value = true;
    //请求二维码
    showToast("即将开放，敬请期待~");
    isRefreshing.value = false;
}
function editUserInfo() {
    if (checkUserLogin()) {
        navToPage('/edit');
    } else {
        //showToast("您还未登录哟~");
        return;
    }
}
function scanQrCode() {
    showToast("扫码功能，暂未开放~");
}
function previewAvatar() {
    let arr = new Array();
    arr.push(userInfo.value.avatar)
    showImagePreview(arr);
}
function navToPage(route) {
    router.push({
        path: route
    })
}
function showLeftPopUp() {
    if (!leftPopUp.value) {
        leftPopUp.value = true;
    }
}
function showSahrePopUp() {
    console.log("输出数据")
    if (!showShare.value) {
        showShare.value = true;
    }
}
function findFriends() {
    showDialog({
        title: "温馨提示",
        message: "发现好友功能即将开放，敬请期待~",
    }).then(() => {
        // on confirm
    }).catch(() => {
        // on cancel
    });
}
function historyRecord() {
    showDialog({
        title: "温馨提示",
        message: "历史记录功能即将开放，敬请期待~",
    })
        .then(() => {
            // on confirm
        })
        .catch(() => {
            // on cancel
        });
}
function draftContents() {
    showDialog({
        title: "温馨提示",
        message: "草稿箱功能即将开放，敬请期待~",
    })
        .then(() => {
            // on confirm
        })
        .catch(() => {
            // on cancel
        });
}
function couponList() {
    showDialog({
        title: "温馨提示",
        message: "优惠券·功能与毕业论文关系不大，暂缓开发，喜欢您在看到此页面的时候能够理解，非常感谢！",
    })
        .then(() => {
            // on confirm
        })
        .catch(() => {
            // on cancel
        });
}
function updateList() {
    router.push("/update");
}
function communityList() {
    showDialog({
        title: "温馨提示",
        message: "社区公约·功能与毕业论文关系不大，暂缓开发，喜欢您在看到此页面的时候能够理解，非常感谢！",
    })
        .then(() => {
            // on confirm
        })
        .catch(() => {
            // on cancel
        });
}
function userList() {
    navToPage('/clause')
}
function pageInit() {
    const token = localStorage.getItem('token');
    if (token != null) {
        //获取到用户信息
        userInfo.value = JSON.parse(localStorage.getItem("userInfo"))
    } else {
        //使用默认信息
        userInfo.value = {
            background: "https://cloth.nightowl.top/images/others/default-background.jpg",
            nickname: "凌空暗羽",
            gender: 2,
            brief: "",
            userId: null,
            avatar: "https://cloth.nightowl.top/images/others/logo.png"
        }
    }
}
pageInit();

function checkUserLogin() {
    const token = localStorage.getItem('token');
    if (token == null) {
        showConfirmDialog({
            title: '温馨提示',
            message:
                '系统检测到您还未登录，登录系统可探索更多内容哟~',
        }).then(() => {
            navToPage("/login");
        }).catch(() => {
            console.log("用户取消登录操作！");
        });
        return false;
    } else {
        userInfo.value = JSON.parse(localStorage.getItem("userInfo"))
        //获取到用户信息
        return true;
    }
}
</script>
<style lang="less" scoped>
.nav-background {
    position: relative;
}

.nav-box .van-nav-bar {
    background: transparent;
}

.nav-bar {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    box-sizing: border-box;
    padding: 20px 18px 0px;
}

.nav-icon-box {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.user-info-box {
    display: flex;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 10px;
    width: 100%;
}


.user-nickname {
    text-align: left;
    margin-left: 15px;

    .gender-box,
    .qrcode-box {
        margin-top: 5px;
    }

    .gender-box {
        display: flex;

        .user-name {
            color: #fff;
            font-weight: bold;
        }

        .gender-icon {
            margin-left: 4px;
        }
    }

    .qrcode-box {
        font-size: 14px;
        color: #d2d0cb91;
    }

    .qrcode-box {
        display: flex;
        align-items: center;
    }

    .qrcode-box .iconfont {
        margin-left: 5px;
    }
}

.user-avatar {
    position: relative;

    .add-status {
        position: absolute;
        right: 0px;
        bottom: 3px;
    }

    .add-status .iconfont-add {
        font-size: 20px;
    }
}

.user-brief {
    text-align: left;
    color: #e8e8e6c1;
    font-size: 14px;
}

.pop-qrcode-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 15px;
    position: relative;

    .close-qrcode {
        position: absolute;
        top: 2px;
        right: 2px;
    }
}

.fruit-setting-box {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.fruit-container {
    display: flex;
}

.fruit-box {

    color: #f7f7f5d5;
    margin-right: 20px;

    .fruit-tag {
        font-size: 10px;
        margin-top: 2px;
    }
}

.setting-btn {
    background-color: transparent !important;
    border: 1px #f7f7f5d5 solid;
    font-size: 10px;
    padding: 2px 6px;
    color: #f7f7f5d5;
    line-height: 48px; //修改了字体大小导致的行高问题
    margin-right: 10px !important;
}

.bottom-tab-box {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #fff;
    transform: translateY(-30px);
}

.left-popup-box {
    padding-top: 5%;
    position: relative;

    .van-cell {
        align-items: center;
    }

    .iconfont {
        font-size: 18px;
    }
}

.iconfont-boy::before {
    color: #75b9eb;
}

.iconfont-girl::before {
    color: #ff3ec9;
}

.bottom-items {
    position: fixed;
    bottom: 20px;
    width: 100%;
    display: flex;
    padding: 0px 30px;
    box-sizing: border-box;
    justify-content: space-between;

    .icon-bg {
        border-radius: 50%;
        padding: 5px;
        width: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f5f5f5;
        margin: 0 auto;
    }

    .icon-label {
        margin-top: 5px;
        font-size: 14px;
        color: #b3b3b3;
    }
}

.van-share-sheet__options {
    justify-content: space-around;
}
</style>